<template>
<!-- 医生主页 -->
  <view class="pages" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <view class="bgColor">
      <!-- #ifdef APP-PLUS-->
      <u-sticky z-index="1188" >
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <u-sticky offset-top="-44" z-index="1188" >
        <!-- #endif -->
          <view :style="{ height: tops + 'px' ,backgroundColor:headerBg}"></view>
          <view class="header" :style="{ paddingTop: '30rpx',backgroundColor: headerBg }">
            <view class="left mar-r-30" @click="toBack">
              <u-icon name="arrow-left" size="20" :color="textColor"  ></u-icon>
            </view>
            <view class="middle-avatar" v-if="flag" >
              <image
                :src="
                  userInfo?.avatar ||
                  'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
                "
                class="bor-radius-50 bg-co-ee"
              />
            </view>
            <view class="middle u-flex flex-1" v-if="flag">
              <view class="name mar-r-10">{{ userInfo?.name }}</view>

              <!-- <view class="user_tags">
                <image
                  v-if="type == 'official'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"
                ></image>
                <image
                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png"
                ></image>
              </view> -->
              <view class="user_tags" v-if="userInfo?.level&&userInfo?.level.length == 4">
                {{userInfo?.level}}
              </view>
              <view class="user_tags_5" v-if="userInfo?.level&&userInfo?.level.length == 5">
                {{userInfo?.level}}
              </view>
              <view class="user_tags_3" v-if="userInfo?.level&&userInfo?.level.length == 3">
                {{userInfo?.level}}
              </view>
              <view class="user_tags_2" v-if="userInfo?.level&&userInfo?.level.length == 3">
                {{userInfo?.level}}
              </view>
            </view>
            <!-- <view class="right-follow" v-if="flag">
               <image src="https://ossresource.miyingbl.com/def/cc2ee202405241442129212.png"></image>
            </view> -->
            <view class="right" >
              <image src="https://ossresource.miyingbl.com/def/fe500202405231727413426.png" class="" v-if="!flag" @click.stop="openAuth"></image>
              <!-- <image src="https://ossresource.miyingbl.com/def/03e43202405231727306873.png" v-if="!flag" @click="toDetail"></image>
              <image src="https://ossresource.miyingbl.com/def/cc2ee202405241442129212.png" v-if="flag" @click="toDetail"></image> -->
            </view>
          </view>
        </u-sticky>
      <view class="card">
        <view class="card-header">
          <view class="header-avtar">
            <view class="avatar flex-center">
              <image
                :src="
                  userInfo?.avatar ||
                  'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
                "
                class="bor-radius-50 bg-co-ee"
              />
            </view>
            <view class="card-name flex-row-between">
              <view class="flex-1 flex-column-start">
                <view class="name_top u-flex">
                  <text class="name mar-r-6 ">{{ userInfo?.name }}</text>
                  <view class="user_tags_5"
                    v-if="userInfo?.level && userInfo?.level.length == 5"
                    >{{ userInfo?.level }}
                  </view>
                  <view class="user_tags"
                    v-if="userInfo?.level && userInfo?.level.length == 4" 
                    >{{ userInfo?.level}}
                  </view>
                  <view class="user_tags_3"
                    v-if="userInfo?.level && userInfo?.level.length == 3" 
                    >{{ userInfo?.level}}
                  </view>
                  <view class="user_tags_2"
                    v-if="userInfo?.level && userInfo?.level.length == 2" 
                    >{{ userInfo?.level}}
                  </view>
                </view>
                <view class="name_bottom u-flex">
                  <view class="mar-r-16 " @click.stop="goToLike(0) ">{{ userInfo?.follow_num || '0' }}关注</view>
                  <view @click.stop="goToLike(1)">{{ userInfo?.fans_num || '0' }}粉丝</view>
                </view>
              </view>
               <view class="card-edit flex-row-center" @click.stop="navigateTo(`/pages-users/my-page/edit-userinfo?from=edit`)">编辑资料</view>
            </view>
          </view>
        </view>
        <view class="card_hospital mar-b-20">
          <view class="card_hospital_title">
            <text class="title">在职医院：</text>
            <text class="name">{{userInfo?.hospital_name}}</text>
          </view>
          <view class="card_hospital_title u-line-1">
            <text class="title">科室：</text>
            <text class="name">{{userInfo?.rf_name?.join('/')}}</text>

          </view>
        </view>
        <view class="card-desc" v-if="userInfo?.adept">
          <text style="color:#5C5C5C">擅长：</text>
          {{isExpanded? userInfo?.adept : userInfo?.adept.length>68 ? userInfo?.adept.substring(0, 68)+'...' : userInfo?.adept}}
          <text style="font-size: 26rpx;color:#00C1B9" @click="toggleContent" v-if="userInfo?.adept.length > 68">{{isExpanded ? '收起' : '展开'}}</text>
        </view>
        <view v-else class="no-desc mar-t-20 u-flex" @click="navigateTo('/pages-users/my-page/myBrief')">
          快写点什么，让大家快速认识你 <up-icon name="edit-pen" color="#AAAAAA" size="22"></up-icon>
        </view>
        <view class="card-tag" >
          <view
            class="tag-item"
            v-for="(tag, j) in userInfo?.new_labels"
            :key="j"
          >
            {{ tag }}</view
          >
        </view>
        <!-- <view class="card-bottom">
          <view class="reservation h-flex">
            <view class="reservat_icon">
              <image src="@/static/my/reservat_h.png" style="width:40rpx;height:44rpx;display:block"></image>
            </view>
            <view class="reservat_text">
              <view class="reservat_top f-s-30">直播动态</view>
              <view class="reservat_bottom f-s-26" @click="navigateTo(`/socials/livePreview/trends?uid=${userInfo?.uid}`)">查看历史记录</view>
            </view>
          </view>

        </view> -->
      </view>
      <!-- tab栏 -->
      <view
        class="week-tabsb"
        :style="{position:'sticky',top: weebTop + 'px',zIndex: '1188',backgroundColor:navBg}"
      >
        <!-- <u-tabs
          class="tabs-container"
          itemStyle="height:60rpx;"
          lineWidth="40rpx"
          lineHeight="6rpx"
          lineColor="#00C1B9"
          :inactiveStyle="{ color: '#999999', transform: 'scale(1)' }"
          :activeStyle="{ color: '#333333', fontWeight: 'bold' }"
          :list="tabs"
          :current="current"
          @click="tabClick"
          :scrollable="false"
        ></u-tabs> -->
        <hTabs :list="tabs" @selectTab="tabClick"></hTabs>
      </view>
      <view class="sec_tab" :style="{position:'sticky',top: secTop + 'px',zIndex: '1188'}" v-if="current !=3">
        <view class="tab_title_1" :class="{active: sec_current == 0}" @click="toSecCurrent(0)">科普</view>
        <view class="tab_title_2" :class="{active: sec_current == 1}" @click="toSecCurrent(1)">帖子</view>
        <view class="tab_title_2" :class="{active: sec_current == 2}" @click="toSecCurrent(2)">视频</view>
      </view>
      <!-- 动态列表 -->
      <view class="article-list" :style="{height: (list.length == 0&&tabflag? '100vh' : 'auto')}" v-if="current == 0">
        <HHotList
            :delShow="true"
            :isShowShare="false"
            :isShowView="true"
            :uid="uid"
            @toLogin="showLogin"
            @updateList="updateList"
            @share="share"
            :list="list"
            @deleteArticle="deleteArticle"
            @itemTap="gotoDetail"
            v-if="list && list?.length && sec_current !=2"
        ></HHotList>

        <h-loading :show="loading" :showMore="list?.length && sec_current !=2"></h-loading>
        <view v-if="list && list?.length == 0 && finish" class="empty_box" :style="{paddingTop: list.length == 0 ? '336rpx' : ''}">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view style="text-align: center; color: #ababab; font-size: 29rpx; margin-top: 20rpx"
            >暂无内容</view
          >
        </view>
      </view>
      <view class="list2 u-flex" v-if="sec_current==2">
        <view class="listItem3" v-for="(item,index) in list" :key="index" @click="navigateTo(`/socials/video/video?status=${item.status}`)">
          <image src="../../static/images/tb.png" mode="aspectFill" class="thumb"></image>
          <view class="foot u-flex" v-if="item.status==1">
            <u-icon name="play-right-fill" color="#fff"></u-icon>
            <view class="u-p-l-10">18.3W</view>
          </view>
        </view>
      </view>
      <!-- 赞过列表 -->
      <view class="article-list" :style="{height: (zanList.length == 0&&tabflag? '100vh' : 'auto')}" v-if="current == 1">
        <HHotList
            :delShow="false"
            :isShowShare="false"
            :uid="userInfo?.uid"
            @toLogin="showLogin"
            @updateList="updateListDy"
            @share="share"
            :list="zanList"
            @deleteArticle="deleteZanArticle"
            @itemTap="gotoDetail"
            v-if="zanList && zanList?.length && sec_current !=2"
        ></HHotList>
        <h-loading :show="showDtLoading" :showMore="zanList.length && sec_current !=2"></h-loading>
        <view  class="empty_box" :style="{paddingTop: zanList.length == 0 ? '336rpx' : ''}" v-if="zanList && zanList?.length == 0 && finish">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view style="text-align: center; color: #ababab; font-size: 29rpx; margin-top: 20rpx"
            >暂无内容</view
          >
        </view>
      </view>
      <!-- 收藏列表 -->
      <view class="article-list" :style="{height: (collectList.length == 0&&tabflag? '100vh' : 'auto')}" v-if="current == 2">
        <!-- <HHotList
          :delShow="false"
          :isShowShare="false"
          :uid="userInfo?.uid"
          @toLogin="showLogin"
          @updateList="updateListDy"
          @share="share"
          :list="collectList"
          @deleteArticle="deleteZanArticle"
          @itemTap="gotoDetail"
          v-if="collectList && collectList?.length && sec_current !=2"
        ></HHotList> -->
        <view v-if="collectList && collectList?.length && sec_current !=2">
          <view class="kepu">
            <view class="kepu_item" v-for="(item,index) in collectList" :key="index"
              @click="navigateTo(item?.content_type ==  'kp' ? `/baby/science/index?id=${item?.ps_id}&from=page`:`/social/detail/index?id=${item?.trends_id}&from=page`)">
              <view class="userInfo">
                <view class='userInfoBox'>
                  <view @click.stop="toMypage(item)">
                    <u--image :src="item?.content_type == 'kp'?item?.avatar:item?.userInfo?.avatar" width="52rpx" height="52rpx" radius="50%" :style="{border: item?.is_live?'3rpx solid #FFB300':'none',borderRadius: '50%'}">
                      <template #error class="flex-center-center">
                        <view class="ic-error">
                          <u-icon name="photo" size="20"></u-icon>
                        </view>
                      </template>
                    </u--image>
                  </view>
                  <view>
                    <view class='nickname'
                      @click.stop="toMypage(item)">

                      <view class="nicknameName u-line-1">{{item?.content_type ==  'kp'?item.nickname : item?.userInfo?.nickname}}</view>
                      <view class="user_tags">
                        <image v-if="item?.app_user_tag=='official'"
                          src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png">
                        </image>
                        <image v-if="item?.app_user_tag=='doctor'"
                          src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png">
                        </image>
                        <text class="u-line-1 "
                          v-if="(item?.identity_status_name=='未知'||item?.identity_status_name=='其他') && !item?.app_user_tag">{{item?.identity_status_name||forMatStatus(item?.identity_status)}}</text>
                      </view>
                    </view>
                    <view class="time">{{item.create_time}}</view>
                  </view>
                </view>
                
              </view>
              <view class="title">
                <view class="cont u-line-1">
                  {{item.title}}
                </view>
              </view>
              <view class="content1  u-line-2" v-if="item.content">
                {{item.text_area}}
                <span class='showAll' v-if="item.showAll">...全文</span>
              </view>
              <view class="images">
                <!-- 只有一張圖 -->
                <view class="images1" v-if="item?.thumbnail ">
                  <image :src="item.thumbnail" mode='widthFix'></image>
                </view>
                <view class="images1" v-if="item?.link_url&& item?.link_url.length==1 ">
                  <image :src="item?.link_url[0]" mode='widthFix'></image>
                </view>
                <!-- 三张图 -->
                <view v-if="item?.link_url&&item?.link_url.length>1" class="pic_items">
                  <view class="pic_item" v-for='(item1,index1) in item.link_url' :key='index1'
                    v-show="index1<3">
                    <image :src='item1' mode="aspectFill"></image>

                  </view>
                </view>
              </view>
              <view class="footer">
                <!-- <view class="footer_item" @click.stop="share(item, i)">
                  <image class="icon_1" src="@/static/images/home_share_icon.png" />
                  <text>分享</text>
                </view> -->
                <view class="footer_item" @click.stop="collect(item, i)">
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/a5da0f6df2fb58b59c78165331d83d93.png"
                    v-if="item?.is_collect == 0"
                  />
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/bee8bc6279b5f19a3ead6d38b9f89f7b.png"
                    v-else
                  />
                  <text>{{  '收藏' }}</text>
                </view>
                <view class="footer_item" @click.stop="toComment(item, i)">
                  <image class="icon_1" src="@/static/images/home_message_icon.png" />
                  <text>{{ item?.comment_number }}</text>
                </view>
                <view class="footer_item" @click.stop="like(item, i)">
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/a204a2063782c1fcdb76e1785f43ca5d.png"
                    v-if="item?.is_zan == 0"
                  />
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/bac8a54bb7578defd3fc6864c1893518.png"
                    v-else
                  />
                  <text>{{ !/-?\d+/.test(item?.zan_number) ? 0 : item?.zan_number }} </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <h-loading :show="showDtLoading" :showMore="collectList.length && sec_current !=2"></h-loading>
        <view  class="empty_box" :style="{paddingTop: collectList.length == 0 ? '336rpx' : ''}" v-if="collectList && collectList?.length == 0 && finish">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view style="text-align: center; color: #ababab; font-size: 29rpx; margin-top: 20rpx"
            >暂无内容</view
          >
        </view>
      </view>
      <!-- 患者评价 -->
      <view v-if="current == 3">
        <view v-if="commentList && commentList.length>0" style="padding:0 24rpx">
          <view class="comment-list">
            <view class="list_title ">
              <view class="title_left f-s-30">患者评价<text class="f-s-26" style="">（{{commenttotal}}条评价）</text></view>
              <view class="title_right">
                <view class="mar-r-10">好评率 {{ favorable }}%</view>
                <view class="right_icon" @click="navigateTo('/pages-users/my-page/common')">
                  <up-icon name="arrow-right"></up-icon>
                </view>
              </view>
          
            </view>
            <view class="comment-item" v-for="(item,index) in commentList" :key="index">
              <view class="item_top flex-row-between">
                {{item?.name}}
                <up-rate active-color="#FFB300" inactive-color="#b2b2b2" gutter="2" readonly :modelValue="item?.scoring"></up-rate>
              </view>
              <view class="item_middle mar-b-20">{{item?.content}}</view>
              <view class="item_bottom">
                {{ item?.create_time}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="!commentList || commentList.length == 0" class="com_empty_box">
          <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"></image>
          <view class="com_empty_text">暂无内容</view>
        </view>
      </view>
    </view>
    <!-- 分享弹框 -->
    <u-popup
      :show="fenShow"
      mode="bottom"
      @close="close"
      :round="10"
      :closeable="false"
      bgColor="#F6F6F6"
    >
      <view>
        <view class="fen_box_title">分享至</view>
        <view class="fen_box">
          <view class="fen_box_cen">
            <button open-type="share" class="fen_box_cen_l" @click="toppicWxShare(userInfo)">
              <image
                src="https://ossresource.miyingbl.com/uploads/20240307/1b8d3a17f569740d545b17facde7d718.png"
                class="fen_box_cen_l_img"
              ></image>
              <view class="fen_box_cen_l_te">微信好友</view>
            </button>
            <button open-type="share" class="fen_box_cen_l" @click="toppicPyShare(userInfo)">
              <image
                src="https://ossresource.miyingbl.com/uploads/20240307/9c488feb2f34a1588dd945dbcf5fec32.png"
                class="fen_box_cen_l_img"
              ></image>
              <view class="fen_box_cen_l_te">朋友圈</view>
            </button>
          </view>
        </view>
        <view class="fen_box_btn">
          <view class="btn flex-center" @click="close">取消</view>
        </view>
      </view>
    </u-popup>
    <!-- 删除 -->
    <h-modal :show="delShow" :titlea="titlea" leftBtn="取消" rightBtn="确定" @clear="delShow=false" @bind="toDel"></h-modal>
    <h-login ref="login"></h-login>
    <!-- 动态分享 -->
    <h-share ref="shareRef" :showLh="showLh" :otherType="otherType"></h-share>
    <h-authpup
    ref="authpup"
    :h="systemInfo.statusHeight"
    type="top"
    @changeAuth="changeAuth"
    permissionID="CAMERA"
  ></h-authpup>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom, onReady, onPageScroll,onUnload,onShow } from '@dcloudio/uni-app'
import { useMemberStore, useSystemStore } from '@/stores'
import { doctorInfo } from '@/api/home'
import { updateDoctorInfo , getcollectionList} from '@/api/my'
import {articleLstApi,articleOperateApi,getZanCoupeApi} from "@/api/social"
import {  followApi,getDoctorLikeApi } from '@/services/my/user'
import { getreplyListApi } from '@/api/manpregnancy'
import { uploadApi } from '@/utils/upLoad'
import { navigateTo,showToast } from '@/utils'
import HHotList from './components/h-hot-list/h-hot-list.vue'
import hTabs from './components/h-tabs/h-tabs.vue'
const type = ref('')
const tops = ref(0)
const tabs = ref([{ name: '动态' }, { name: '赞过' },{name:'收藏'},{name:'患者评价'}])
const collectList = ref([])
const collectParams = ref({
  limit:10,
  page: 1,
  type:'zsbk',
  uid:''
})
const commentList = ref([
]) // 评论列表
const current = ref(0)
const sec_current = ref(0)
const list = ref([])
const params = ref({
  limit:10,
  page: 1,
  type:2, //1=帖子2=科普
  status:1, //0=审核中1=已发布2=审核驳回 全部就啥也不传
  unset_permission:2
})
const kp_last_page = ref(0)
const zanParams = ref({
  limit:10,
  page: 1,
  type:2, //1动态 2 科普
  })
const zanList = ref([])
const systemInfo = useSystemStore()
const uid = ref('')
const loading = ref(false)
const showDtLoading = ref(false)
const login = ref(null)
const fenShow = ref(false)
const laheiShow = ref(false)
const equipment = ref('')
const is_self = ref(false)
const delShow = ref(false)
const titlea = ref('')
const listQuery = ref({
  page: 1,
  limit: 10,
  uid: '',
  long: '',
  lat: '',
})
const userQuery = ref({
  userId: '',
})
const last_page = ref(0)
const last_page_dt = ref(0)
const backgroundImage = ref('https://ossresource.miyingbl.com/uploads/20240416/4b54e0bed8fda9ea8538906fe02f647a.png')
let finish = ref(false)
const total = ref(0)
const totalDt = ref(0)
const userInfo = ref({})
const flag = ref(false)
const tabflag = ref(false)
const shareRef = ref(null)
const showLh = ref(false)
const detail = ref({})
const isExpanded = ref(false)
// 相机权限
const authpup = ref(null)
function openAuth() {
  nextTick(() => {
    authpup.value.open()
  })
}
// 换封面
function changeAuth() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: async (e) => {
      // tempFilePath可以作为img标签的src属性显示图片
      const url = await uploadApi(e.tempFilePaths[0])
      const res = await updateDoctorInfo({
        background: url,
        type: 7,
      })
      if (res.code === 200) {
        getDoctorUserInfo()
      }
      showToast(res.message)
    },
  })
}
const toBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const delId = ref('')
const delIndex = ref(0)
const delTab = ref(0)
const toggleContent=() =>{
  isExpanded.value =!isExpanded.value
}
const deleteArticle = (row,index)=>{
  delId.value = row.id
  delIndex.value = index
  if(sec_current.value == 0){
    titlea.value = '是否确认删除该条文章'
  }else if(sec_current.value == 1){
    titlea.value = '是否确认删除该条动态'
  }
  delShow.value = true
  if(sec_current.value == 0){
    delTab.value = 2
  }else if(sec_current.value == 1){
    delTab.value = 1
  }

}
const toDel = async() =>{
  const res = await articleOperateApi({
    article_id: delId.value,
    type: 3,
    tab: delTab.value,
  })
  if(res.code === 200){
    list.value.splice(delIndex.value,1)
    delShow.value = false
    uni.showToast({
      title: '删除成功',
      duration: 1000,
    })
  }
}
const deleteZanArticle = async (row,index) => {
  const userStore = useMemberStore()
  if (!userStore.token) {
    return false
  }
  if (row.content_type == 'dt') {
    // 动态
    let res = await articleOperateApi({
      article_id: row.id,
      type: 1,
      tab: 1,
    })
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    if (res.code == 200) {
      if (row.is_like == 1) {
        row.is_like = 0
        row.zan_number--
      } else {
        row.is_like = 1
        row.zan_number++
      }
    }
  } else {
    // 科普
    const res = await articleOperateApi({
      article_id: row.id,
      type: 1,
      tab: 2,
    })
    if (res.code == 200) {
      if (row.is_like == 1) {
        row.zan_number--
      } else {
        row.zan_number++
      }
    }
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    row.is_like = !row.is_like
  }
}
const updateListDy = ()=>{}
const otherType = ref(false)
const toDetail = () => {
  const store = useMemberStore()
  if (!store.token) return login.value.open()
  if (store.token) {
    let item = {}
    if (userInfo.value.uid == store.userInfo.uid) {
      showLh.value = false
      item = {
        imageUrl: userInfo.value.avatar,
        title: `分享${userInfo.value.name}的个人主页`,
        summary: userInfo.value.adept,
        path: `pages-users/my-page/official-doctor-home?uid=${store.userInfo.uid}`,
        uid: userInfo.value.uid,
        id: userInfo.value.uid,
        user_id: userInfo.value.uid,
      }
    }
    otherType.value = true
    shareRef.value.open(item)
  }
}
function tabClick(e) {
  console.log('e',e);
  
  current.value = e
  sec_current.value = 0
  if (e == 0) {
    finish.value = false
    list.value = []
    params.value.type = 2
    getContent()
  }else if(e == 1){
    finish.value = false
    zanParams.value.type = 2
    zanList.value = []
    getKePuLike()
  }else if(e == 2){
    finish.value = false
    collectParams.value.type = 'zsbk'
    collectList.value = []
    getCollectList()
  }else if(e == 3) {
    getreplyList()
  }
}
const commentParams = ref({
  page:1,
  limit:10,
  type:0 //0全部 1孕产 2男性
})
const favorable = ref(0) //好评率
const commenttotal = ref(0)
async function getreplyList() {
  const res = await getreplyListApi(commentParams.value)
  commentList.value = res.data.data
  favorable.value = res.data.favorable
  commenttotal.value = res.data.total
}
onShow(() => {
})
onPageScroll((e) => {
  onPageScrollEvent(e)
})

const goToLike = (type) => {
  switch (type) {
    case 0:
      navigateTo('/pages-users/my-like/index?current=0')
      break
    case 1:
      navigateTo('/pages-users/my-like/index?current=1')
      break
  }
}
onUnload(() => {
})
const textColor = ref('#fff') // header字体颜色
const cardTop = ref(0) // 卡片距离顶部高度
const cardBottom = ref(0) // 卡片底部距离顶部距离
const headerBg=ref('transparent')// header背景色
const weebTop = ref(0) //tab吸顶高度
const navBg = ref('transparent') // tab背景色
const secTop = ref(0)// 二级tab吸顶高度
/**
 * 页面滚动
 */
function onPageScrollEvent(e) {
  const scrollTop = e.scrollTop
  headerBg.value = scrollTop+50 > cardTop.value?'#fff':'transparent'
  textColor.value = scrollTop+50 > cardTop.value?'#000':'#fff'
  flag.value = scrollTop+50 > cardTop.value?true:false
  tabflag.value = scrollTop+50 > secTop.value?true:false
  navBg.value = scrollTop > cardBottom.value? '#fff':'transparent'
}
// 获取高度
function getDocumentInfo() {
  const query1 = uni.createSelectorQuery()
  const query2 = uni.createSelectorQuery()
  const query3 = uni.createSelectorQuery()
  query1
    ?.select('.header')
    ?.boundingClientRect((navbar_data) => {
      weebTop.value = navbar_data.bottom+22
    })
    .exec()
  query2
    ?.select('.card')
    ?.boundingClientRect((card_data) => {

    cardTop.value = card_data.top
    cardBottom.value = card_data.bottom
    })
    .exec()
  query3
    ?.select('.week-tabsb')
    ?.boundingClientRect((week_data) => {
    secTop.value = week_data.height+weebTop.value

    })
    .exec()

}
function getSystemInfo() {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight
    },
  })
}
const gotoDetail = (item,isCom) => {
  if(current.value == 0) {
    if(isCom) {
      navigateTo(`/baby/science/index?isCom=${isCom}&id=${item.id}`)
    }else {
      navigateTo(`/baby/science/index?id=${item.id}`)
    }
  }else if(current.value == 1) {
    navigateTo('/socials/detail/index?id=' + item.id)
  }
}
/**
 * 显示登录
 */
function showLogin() {
  nextTick(() => {
    login.value.open()
    return false
  })
}
// 关注
async function follow() {
  try {
    const res: any = await followApi({
      follow_user_id: uid.value,
      type: 1,
    })
    uni.showToast({ title: res.message })
    if(type.value == 'official'){

    }else if(type.value == 'doctor'){
      getDoctorUserInfo()
    }
  } catch (error) {
    console.log(error)
  }
}
// 分享微信
function toppicWxShare(row) {
  /* #ifdef H5 */
  uni.showToast({
    icon: 'error',
    title: '暂不支持分享',
  })
  fenShow.value = false
  /* #endif */
  /* #ifdef APP-PLUS */
  let url = `${'/pages-users/my-page/index'}?&id=${row.detail.uid}`
  let imageUrl = row.detail.avatar
  uni.share({
    provider: 'weixin',
    type: 0,
    scene: 'WXSceneSession',
    href: `https://weappdev.miyingbl.com/download/index.html?path=${url}`,
    title: row.detail.nickname || '咪婴伴侣',
    summary: row.detail.nickname || '咪婴伴侣',
    imageUrl: imageUrl,
    success: (res) => {
      uni.showToast({
        title: '分享成功',
        icon: 'success',
      })
      uni.hideLoading()
      fenShow.value = false
    },
    fail: (err) => {
      uni.showToast({
        title: '分享失败',
        icon: 'none',
        duration: 2000,
      })
      fenShow.value = false
      uni.hideLoading()
    },
  })
  /* #endif */
}
// 分享到朋友圈
function toppicPyShare(row) {
  /* #ifdef H5 */
  uni.showToast({
    icon: 'error',
    title: '暂不支持分享',
  })
  fenShow.value = false
  /* #endif */
  /* #ifdef APP-PLUS */

  let url = `/pages-users/my-page/index?&id=${row.detail.uid}`
  let imageUrl =row.detail.avatar

  uni.share({
    provider: 'weixin',
    type: 0,
    scene: 'WXSceneTimeline',
    href: `https://weappdev.miyingbl.com/download/index.html?path=${url}`,
    title: row.detail.nickname || '咪婴伴侣',
    summary: row.detail.nickname || '咪婴伴侣',
    imageUrl: imageUrl,
    success: (res) => {
      uni.showToast({
        title: '分享成功',
        icon: 'success',
      })
      fenShow.value = false
      uni.hideLoading()
    },
    fail: (err) => {
      uni.showToast({
        title: '分享失败',
        icon: 'none',
        duration: 2000,
      })
      fenShow.value = false
      uni.hideLoading()
    },
  })
  /* #endif */
}
function close() {
  fenShow.value = false
}
function toReport() {
  fenShow.value = false
  uni.navigateTo({
    url: '/pageT/report?id=' + uid.value + '&type=8',
  })
}
const lahei = () => {
  fenShow.value = false
  laheiShow.value = true
}
const closeLafei = () => {
  laheiShow.value = false
}
function laheiSure() {
  uni.showToast({
    title: '拉黑成功',
    duration: 1000,
  })
  laheiShow.value = false
}
// 获取医生用户信息
async function getDoctorUserInfo() {
  const res: any = await doctorInfo()
  userInfo.value = res.data
  backgroundImage.value =
    res.data?.background ||
    'https://ossresource.miyingbl.com/uploads/20240416/4b54e0bed8fda9ea8538906fe02f647a.png'
}
async function toSecCurrent(index) {
  if(current.value == 0) {
    sec_current.value = index
    console.log('sec_current',index);
    switch(index) {
      case 0:
        params.value.type = 2
        params.value.page = 1
        list.value = []
        finish.value = false
        await getContent()
        break
      case 1:
        params.value.type = 1
        params.value.page = 1
        list.value = []
        finish.value = false
        await getContent()
        break
      case 2:
          list.value = [{
              name: '育儿经验',
              status: 1
            },
            {
              name: '育儿经验',
              status: 1
            },
            {
              name: '育儿经验',
              status: 1
            }
          ]
          break
    }
  }else if(current.value == 1){
    sec_current.value = index
    switch(index) {
      case 0:
        zanParams.value.type = 2
        zanParams.value.page = 1
        zanList.value = []
        finish.value = false
        await getKePuLike()
        break
      case 1:
        zanParams.value.type = 1
        zanParams.value.page = 1
        zanList.value = []
        finish.value = false
        await getKePuLike()
        break
      case 2:
        list.value = [{
            name: '育儿经验',
            status: 1
          },
          {
            name: '育儿经验',
            status: 1
          },
          {
            name: '育儿经验',
            status: 1
          }
        ]
        break
    }
  }else if(current.value == 2){
    sec_current.value = index
    switch(index) {
      case 0:
        collectParams.value.type = 'zsbk'
        collectParams.value.page = 1
        collectList.value = []
        finish.value = false
        await getCollectList()
        break
      case 1:
        collectParams.value.type = 'sjtz'
        collectParams.value.page = 1
        collectList.value = []
        finish.value = false
        await getCollectList()
        break
      case 2:
        list.value = [{
            name: '育儿经验',
            status: 1
          },
          {
            name: '育儿经验',
            status: 1
          },
          {
            name: '育儿经验',
            status: 1
          }
        ]
        break
    }
  }



}
// 获取医生动态列表
async function getContent() {
  const userStore = useMemberStore()
  loading.value = true
  const res = await articleLstApi(params.value)
  if(sec_current.value == 0){
    list.value = list.value.concat(...res.data.list.data.map((item) => {
      return {
        ...item,
        content_type: 'kp'
      }
    }))
    kp_last_page.value = res.data.list.last_page
  }else if(sec_current.value == 1){
    list.value = list.value.concat(...res.data.list.data.map((item) => {
      return {
        ...item,
        content_type: 'dt'
      }
    }))
    kp_last_page.value = res.data.list.last_page
    console.log('list',list.value);

  }
    finish.value = true
    loading.value = false
}

// 获取医生赞过的科普
async function getKePuLike() {
  showDtLoading.value = true
  const res = await getDoctorLikeApi(zanParams.value)
  zanList.value = zanList.value.concat(...res.data.data)
  last_page_dt.value = res.data.last_page
  finish.value = true
  showDtLoading.value = false
}
// 获取医生收藏的列表
async function getCollectList() {
  collectParams.value.uid = useMemberStore().userInfo.uid
  showDtLoading.value = true
  const res = await getcollectionList(collectParams.value)
  collectList.value = collectList.value.concat(...res.data.list.map((item) =>{
    return {
      ...item,
      content_type:collectParams.value.type == 'zsbk'?'kp':'dt',
      is_collect:1
    }
  }))
  finish.value = true
  showDtLoading.value = false
  console.log('collectList',collectList.value.v);
  
}
async function like(row, i) {
  const userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    return false
  }
  console.log('row',row);
  
    if (row.content_type == 'dt') {
    // 动态
    let res = await articleOperateApi({
      article_id: row.trends_id,
      type: 1,
      tab: 1,
    })
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    if (res.code == 200) {
      if (row.is_zan == 1) {
        row.is_zan = 0
        row.zan_number--
      } else {
        row.is_zan = 1
        row.zan_number++
      }
    }
  } else {
    // 科普
    const res = await articleOperateApi({
      article_id: row.ps_id,
      type: 1,
      tab: 2,
    })
    if (res.code == 200) {
      row.is_zan = row.is_zan?0:1
      if (row.is_zan == 1) {
        row.zan_number++
      } else {
        row.zan_number--
      }
    }
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    
  }
}
// 处理标签
function changeArr(arr) {
  let newArr = []

  if (arr?.length) {
    for (let i = 0; i < arr?.length; i++) {
      console.log('arr[i]',arr[i]);
      if (arr[i].length == 4) {
        newArr.push(arr[i])
        if (newArr.length == 1) {
          if (newArr[0].length == 4) {
            if (arr[i].length == 2) {
              newArr.push(arr[i])
            }
          }
        }
        if (newArr.length == 2) {
          return newArr
        }
      } else if (arr[i].length == 3) {
        newArr.push(arr[i])
        if (newArr.length >= 2) {
          return newArr
        }
      } else if (arr[i].length <= 2) {
        newArr.push(arr[i])
        if (newArr.length >= 3) {
          return newArr
        }
      } else {
        newArr.push(arr[i])
      }
    console.log('newArr',newArr);
    }
  }

  return newArr
}
function forMatStatus(status) {
  let text = ''
  switch (status) {
    case 0:
      text = ''
      break
    case 1:
      text = '记经期'
      break
    case 2:
      text = '备孕中'
      break
    case 3:
      text = '怀孕中'
      break
    case 4:
      text = '宝宝已出生'
      break
    case 5:
      text = '未婚'
      break
    case 6:
      text = '准爸'
      break

    case 7:
      text = '爸爸'
      break
    case 8:
      text = '生产育儿'
      break
    case 9:
      text = '慢病'
      break
    case 10:
      text = ''
      break
  }
  return text
}
/**
 * 更新列表
 */
let zan = 0

function updateList(row, i, key) {
  if (key == 'is_follow') {
    list.value.forEach((e) => {
      if (e.uid == row.uid) {
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (list.value[i][key] = list.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zan != 0) {
    list.value[i].zan_number--
    list.value[i][key] = 0
    zan = 0
  } else {
    zan = 1
    list.value[i].zan_number++
    list.value[i][key] = 1
  }
}
function addListener() {
  uni.$on('update_num', (row) => {
    if(current.value == 0){
      const index = list.value.findIndex((item) => item.id == row.id)
      if (index != -1) {
        list.value[index].is_like = row.is_like
        list.value[index].is_collect = row.is_collect
        list.value[index].zan_number = row.zan_number
        list.value[index].comment_number = row.comment_number
      }
    }else if(current.value == 1){
      const index = zanList.value.findIndex((item) => item.id == row.id)
      if (index != -1) {
        zanList.value[index].is_like = row.is_like
        zanList.value[index].is_collect = row.is_collect
        zanList.value[index].zan_number = row.zan_number
        zanList.value[index].comment_number = row.comment_number
        if(zanList.value[index].is_like == 0 ) {
          zanList.value.splice(index,1)
        }
      }
    }else if(current.value == 2) {
      const index = collectList.value.findIndex((item) => item.ps_id == row.id)
      if(index != -1) {   
        collectList.value[index].is_zan = row.is_like
        collectList.value[index].zan_number = row.zan_number
        collectList.value[index].is_collect = row.is_collect
        if(collectList.value[index].is_collect == 0) {
          collectList.value.splice(index,1)
        }
        
      }
    }
  })
  uni.$on('updateUserInfo',(res) =>{
    getDoctorUserInfo()
  })
  uni.$on('view_num',(data) => {
    if(sec_current.value == 0) {
      const index = list.value.findIndex((item) => item.id == data.id)
      console.log('');
      if(index != -1){
        list.value[index].views_number++
      }
    }else if(sec_current.value == 1){
      const index = list.value.findIndex((item) => item.id == data.id)
      if(index != -1){
        list.value[index].view_number++
      }
    }
  })
}
const share = (row: any) => {
  const store = useMemberStore()
  if (!store.token) {
    login.value.open()
    return
  } else {
    showLh.value = true
    console.log('row',row);
    row.user_id = row.uid
    shareRef.value.open(row)
  }
}
function extractTextFromRichText(html) {
  const re1 = new RegExp('<.+?>', 'g') // 匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
  const arrEntities = {
    lt: '<',
    gt: '>',
    nbsp: ' ',
    amp: '&',
    quot: '"',
    ldquo: '“',
    mdash: '—',
    rdquo: '”',
  }

  return html
    .replace(re1, '')
    .replace(/&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi, function (all, t) {
      return arrEntities[t]
    })
}
const toComment = (item, i) => {
  navigateTo(
    `${item.content_type == 'dt' ? '/socials/detail/index' : '/baby/science/index'}?&id=${
      item.id
    }&isCom=true&type=${item.type}`,
    0,
  )
}

onLoad((options: any) => {
  if (options.uid) {
    uid.value = options.uid
  }
  getDoctorUserInfo()
  getContent()
  getSystemInfo()
  addListener()
})
onReady(() => {

  getDocumentInfo()
})
onReachBottom(() => {
  if(current.value == 0) {
  if(sec_current.value == 0){}else if(sec_current.value == 1){
    if(params.value.page < kp_last_page.value){
      params.value.page++
      getContent()}
  }
    if(params.value.page < last_page.value){
      params.value.page++
      getContent()
    }
  }else if(current.value == 1) {
  if(sec_current.value == 0){
  if(zanParams.value.page < last_page_dt.value){
      zanParams.value.page++
      getKePuLike()
    }
  }else if(sec_current.value == 1){}
    if(zanParams.value.page < last_page_dt.value){
      zanParams.value.page++
      getKePuLike()
    }}
})
</script>

<style lang="scss" scoped>
.pages {
  background-size: 100% 512rpx;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #f6f6f6;
  width: 100%;
  min-height: 100vh;
  .bgColor {
    .header {
      width: 750rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 143rpx;
      padding: 0 26rpx;
      .left{
        // width: 14rpx;
        // height: 27rpx;
        .head_img {
          width: 14rpx;
          height: 27rpx;
        }
      }
      .middle-avatar {
        margin-right: 20rpx;
        image {
          width: 81rpx;
          height: 81rpx;
        }
      }
      .middle {
      margin-right: 120rpx;

      .user_tags {
        width: 112rpx;
        height: 27rpx;
        background: url('https://ossresource.miyingbl.com/def/63413202405250951285974.png') center center;
        background-size: 100% 100%;
        line-height: 27rpx;
        font-weight: 500;
        font-size: 18rpx;
        color: #ffffff;
        padding-top: 2rpx;
        padding-left: 25rpx;
      }
      .user_tags_5 {
        width: 130rpx;
        height: 27rpx;
        background: url('/static/index/ysd.png') center center;
        background-size: 100% 100%;
        line-height: 27rpx;
        font-weight: 500;
        font-size: 18rpx;
        color: #ffffff;
        padding-top: 2rpx;
        padding-left: 27rpx;
      }
      .user_tags_3 {
        width: 94rpx;
        height: 27rpx;
        background: url('/static/index/ysb.png') center center;
        background-size: 100% 100%;
        line-height: 27rpx;
        font-weight: 500;
        font-size: 18rpx;
        color: #ffffff;
        padding-top: 2rpx;
        padding-left: 25rpx;

      }
      .user_tags_2 {
        width: 82rpx;
        height: 27rpx;
        background: url('/static/index/ysa.png') center center;
        background-size: 100% 100%;
        line-height: 27rpx;
        font-weight: 500;
        font-size: 18rpx;
        color: #ffffff;
        padding-top: 2rpx;
        padding-left: 27rpx;

      }
    }
      .right-follow {
        margin-right: 38rpx;

        image{
          width: 30rpx;
          height: 30rpx;
        }
      }
      .right {
       image{
        width: 30rpx;
        height: 30rpx;
       }

      }
    }
    .card {
      width: 702rpx;
      // min-height: 316rpx;
      background: #fefefe;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 0 auto;
      padding: 8rpx 20rpx 24rpx 20rpx;
      position: relative;
      z-index: 20;
      .card-header {
        height: 80rpx;
        width: 100%;
        margin-bottom: 10rpx;
        position: relative;
        .header-avtar {
         height: 100%;
         .avatar{
            width: 140rpx;
            height: 140rpx;
            background: #FFFFFF;
            border-radius: 50%;
            position: absolute;
            top: -60rpx;
            margin-right: 24rpx;
            image {
              width: 130rpx;
              height: 130rpx;
              // position: absolute;
              // top: -60rpx;
              // margin-right: 24rpx;
            }
          }
          .card-name {
            width: 512rpx;
            height: 100%;
            float: right;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 30rpx;
            color: #333333;
            padding-left: 24rpx;
            // margin-right: 290rpx;
            .name{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 30rpx;
              color: #202020;
            }
            .user_tags {
              width: 112rpx;
              height: 27rpx;
              background: url('https://ossresource.miyingbl.com/def/63413202405250951285974.png') center center;
              background-size: 100% 100%;
              line-height: 27rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: #ffffff;
              // margin-right: 8rpx;
              padding-top: 2rpx;
              padding-left: 25rpx;
              // position: absolute;
              // bottom: 18rpx;
              image {
                width: 113rpx;
                height: 27rpx;
                display: block;
                margin-right: 10rpx;
              }
            }
            .user_tags_5 {
              width: 130rpx;
              height: 27rpx;
              background: url('/static/index/ysd.png') center center;
              background-size: 100% 100%;
              line-height: 27rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: #ffffff;
              padding-top: 2rpx;
              padding-left: 27rpx;
           
            }
            .user_tags_3 {
              width: 94rpx;
              height: 27rpx;
              background: url('/static/index/ysb.png') center center;
              background-size: 100% 100%;
              line-height: 27rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: #ffffff;
              padding-top: 2rpx;
              padding-left: 25rpx;
 
            }
            .user_tags_2 {
              width: 82rpx;
              height: 27rpx;
              background: url('/static/index/ysa.png') center center;
              background-size: 100% 100%;
              line-height: 27rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: #ffffff;
              padding-top: 2rpx;
              padding-left: 27rpx;
 
            }
            .card-edit{
              width: 140rpx;
              height: 56rpx;
              background: #00C1B9;
              border-radius:50rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 26rpx;
              color: #FFFFFF;
            }
          }

        }
      }
      .card_hospital{
        width: 662rpx;
        height: 140rpx;
        background: #F6F6F6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
        .card_hospital_title{
          .title{
            color: #5C5C5C;
          }
        }
      }
      .card-desc {
        margin-bottom: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #202020;
        min-height: 30rpx;
      }
      .no-desc{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #AAAAAA;
        margin-bottom: 30rpx;
      }
      .card-tag {
        // margin-bottom: 20rpx;
        display: flex;
        flex-wrap: wrap;
        .tag-item {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #00C1B9;
          margin-right: 20rpx;
          margin-bottom: 10rpx;
          background: #D6FCFB;
          // width: 110rpx;
          height: 36rpx;
          text-align: center;
          line-height: 36rpx;
          border-radius: 20rpx;
          padding: 0rpx 10rpx;
        }
      }
      .card-bottom {
        display: flex;
        justify-content: space-between;
        .num {
          display: flex;
          color: #474747;
        }

        .btnFollow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130rpx;
          height: 55rpx;
          background: #fff;
          border: 1rpx solid #ffb300;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffb300;
        }
      }
    }
    .week-tabsb {
      padding: 17rpx 22rpx 10rpx 22rpx;
      box-sizing: border-box;
      .tabs-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        // flex-direction: inherit;
      }
    }
    .sec_tab {
      padding: 20rpx 24rpx;
      display: flex;
      font-size: 28rpx;
      color: #AAAAAA;
      background: #F5F6F8;
      .tab_title_1 {
        width: 76rpx;
        position: relative;

      }
      .active{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #00C1B9;
      }
      .tab_title_1::after {
        position: absolute;
        content: "";
        width: 1rpx;
        height: 30rpx;
        background-color: #999999;
        right: 0;
        top:4rpx;
      }
      .tab_title_2{
        width: 95rpx;
        position: relative;
        text-align: center;
      }
      .tab_title_2:not(:last-child)::after {
        position: absolute;
        content: "";
        width: 1rpx;
        height: 30rpx;
        background-color: #999999;
        right: 0;
        top:4rpx;
      }
    }
    .article-list {
      width: 702rpx;
      margin: 0 auto;

    }
    .empty_box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 118rpx;

      .empty_image {
        width: 240rpx;
        height: 200rpx;
      }
    }
  }
}

.pages::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( 180deg, rgba(51,51,51,0.3) 100%, rgba(51,51,51,0) 0%);
  width:100%;
  height: 512rpx;
  z-index: 1;
  pointer-events: none;
}
.name_bottom{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #5C5C5C;
  margin-top: 6rpx;
}
.reservation{
  margin-right: 200rpx;
  .reservat_icon{
    margin-right: 21rpx;
    
  }
  .reservat_text{
    .reservat_top{
      margin-bottom: 12rpx;
      color: #202020;
    }
    .reservat_bottom{
      color: #5C5C5C;
    }
  }
}
.list2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.listItem3 {
  width: 248rpx;
  height: 332rpx;
  background: #D8D8D8;
  position: relative;

  .thumb {
    display: block;
    width: 248rpx;
    height: 332rpx;
    display: block;
  }

  .more {
    position: absolute;
    top: 10rpx;
    right: 15rpx;
  }

  .foot {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, #202020 100%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    padding-left: 15rpx;
    padding-bottom:10rpx;
  }
}
.fen_box_title {
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 90rpx;
  height: 90rpx;
}

.fen_box {
  width: 100%;
  border-radius: 10rpx 10rpx 0 0;
  padding: 0 24rpx 24rpx;

  .fen_box_cen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 20rpx;

    .fen_box_cen_l {
      text-align: center;
      width: 150rpx;
      margin: 0;
      line-height: 1;
      background-color: transparent !important;

      &::after {
        background: transparent !important;
      }

      .fen_box_cen_l_img {
        width: 100rpx !important;
        height: 100rpx !important;
        border-radius: 50%;
      }

      .fen_box_cen_l_te {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;
      }
    }

    .lh_box_cen_l {
      width: 216rpx;
      padding: 10rpx 0 15rpx;
      background: #ffffff;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      text-align: center;
      margin: 10rpx 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;

      image {
        width: 75rpx;
        height: 75rpx;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.fen_box_btn{
  width: 100%;
  padding: 0 24rpx;
  .btn{
    width: 702rpx;
    height: 88rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #AAAAAA;
  }
}
.comment-list{
  width: 702rpx;
  height: 805rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 20rpx;
}
.com_empty_box{
  padding-top: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  image{
    width: 240rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  .com_empty_text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #ABABAB;
  }
}
.list_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title_right{
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
  }
}
.comment-item{
  padding-bottom: 20rpx;
  padding-top: 20rpx;
  border-bottom: 1rpx solid #F6F6F6;
  .item_top{
    margin-bottom: 10rpx;
  }
  .item_middle{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    
  }
  .item_bottom{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
  }
}
.kepu {
  padding: 0;

  .kepu_item {
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    margin-bottom: 20rpx;

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .cont {
        width: 570rpx;
      }

      .close_btn_icon {
        width: 26rpx;
        height: 32rpx;
        display: block;
      }
    }

    .content1 {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      margin-top: 10rpx;

      .showAll {
        // position:absolute;
        // bottom:0;
        // right:0;
        color: #305E9D;
        // background:#fff;
      }
    }

    .images {
      margin-top: 15rpx;

      .images1 {
        width: 356rpx;
        max-height: 300rpx;
        overflow: hidden;
        border-radius: 10rpx;

        image {
          width: 356rpx;
          border-radius: 10rpx;
        }
      }
    }

    .pic_items {
      overflow: hidden;

      .pic_item {
        width: 32%;
        float: left;
        height: 183rpx;
        margin-right: 1.33%;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }

    .userInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;

      .userInfoBox {
        display: flex;
        align-items: center;

        .nickname {
          padding-left: 10rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #666;
          display: flex;
          align-items: center;

          .nicknameName {
            max-width: 200rpx;
            overflow: hidden;
          }

          .user_tags {
            margin-left: 10rpx;
            width: 112rpx;
            height: 27rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
        }

        .time {
          font-weight: 500;
          font-size: 20rpx;
          color: #9D9D9D;
          padding-left: 10rpx;
        }
      }
    }
  }
}
.footer {
  width: 100%;
  height: 36%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26rpx;

  .footer_item {
    display: flex;
    align-items: center;

    .icon_1 {
      width: 26rpx;
      height: 26rpx;
    }

    .icon_3 {
      width: 25rpx;
      height: 24rpx;
    }

    text {
      margin-left: 15rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
    }
  }
}
</style>
